<template>
  <div class="article markdown-body" ref="contentRef">
    <!-- 头部 -->
    <van-nav-bar
      class="page-nav-bar"
      title="黑马头条"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <div class="main-wrap">
      <!-- 标题 -->
      <h1 class="article-title">{{ articles.title }}</h1>
      <!-- 作者信息 -->
      <user-info :articles="articles"></user-info>
      <!-- 正文 -->
      <div class="article-content" v-html="articles.content"></div>
      <!-- 结束符 -->
      <van-divider>正文结束</van-divider>
      <!-- 评论 -->
      <comments-list
        :newComment="newComment"
        @showReplyCommentPopup="showReplyComment"
      ></comments-list>
    </div>
    <!-- 底部 -->
    <div class="article-bottom">
      <article-bottom
        :articles="articles"
        @close="isShowComments = true"
      ></article-bottom>
    </div>
    <!-- 输入框弹出层 -->
    <van-popup
      v-model="isShowComments"
      position="bottom"
      class="comments-popup"
    >
      <comment-post
        target="$route.query.articleId"
        @commentPost=";[(isShowComments = false), (newComment = $event)]"
      ></comment-post>
    </van-popup>
    <!-- 回复评论弹出层 -->
    <van-popup
      v-model="isShowReplyComment"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <reply-comment
        :ReplyComment="ReplyComment"
        @close="isShowReplyComment = false"
      ></reply-comment>
    </van-popup>
  </div>
</template>

<script>
import { getArticlesDetailsAPI } from '@/api'
import CommentsList from './components/CommentsList.vue'
import ReplyComment from './components/ReplyComment.vue'
import CommentPost from './components/CommentPost.vue'
import UserInfo from './components/UserInfo.vue'
import ArticleBottom from './components/ArticleBottom.vue'
import { ImagePreview } from 'vant'
export default {
  name: '',
  components: {
    CommentsList,
    ReplyComment,
    CommentPost,
    UserInfo,
    ArticleBottom
  },
  props: {},
  data() {
    return {
      articles: {},
      isShowComments: false,
      index: 0,
      isShowReplyComment: false,
      ReplyComment: {},
      newComment: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getArticlesDetails()
  },
  methods: {
    // 获取文章信息
    async getArticlesDetails() {
      try {
        this.$toast.loading({
          message: '正在加载文章内容，请稍等...',
          forbidClick: true
        })
        const { data } = await getArticlesDetailsAPI(
          this.$route.query.articleId
        )
        this.articles = data.data
        this.isShowCollection = data.data.is_followed
        this.isShowFollow = data.data.is_collected
        setTimeout(() => {
          this.previewImg()
        }, 10)
      } catch (error) {
        this.$toast.fail('加载失败，请重试')
      }
    },
    // 展开回复评论
    showReplyComment(comment) {
      this.ReplyComment = comment
      this.isShowReplyComment = true
    },
    // 图片预览
    // 给根标签绑定ref属性
    // 获取整个页面标签后通过querySelectorAll('img')获取所有的图片标签
    // 遍历 将每一个图片标签的src属性重新组成一个新数组
    // 通过onclick给每一个图片标签绑定点击事件
    // 使用组件
    // 注意：必须在页面加载完后才能使用ref获取标签
    // 可以在文章内容获取铺设成功后通过一个定时器获取内容
    previewImg() {
      const contentEl = this.$refs.contentRef
      const allImg = contentEl.querySelectorAll('img')
      const images = []
      allImg.forEach((item, index) => {
        images.push(item.src)
        item.onclick = () => {
          ImagePreview({
            images,
            startPosition: index,
            closeable: true
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.article {
  -webkit-text-size-adjust: 100%;
  margin: 0;
  color: #24292f;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-size: 0.42667rem;
  line-height: 1.5;
  word-wrap: break-word;
}
:deep(.page-nav-bar) {
  background-color: #1989fa;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
:deep(.main-wrap) {
  position: fixed;
  left: 0;
  right: 0;
  top: 1.22667rem;
  bottom: 1.17333rem;
  overflow-y: scroll;
  background-color: #fff;
  color: #24292f;
  font-size: 0.42667rem;
  line-height: 1.5;
  .article-title {
    font-size: 0.53333rem;
    padding: 0.66667rem 0.42667rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    border-bottom: 0.02667rem solid #d8dee4;
    color: #3a3a3a;
  }
  .article-content {
    padding: 0.73333rem 0.42667rem;
  }
}
.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.overlay {
  .wrapperImg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #000;
  }
  .van-icon-clear {
    position: absolute;
    top: 0.42667rem;
    right: 0.42667rem;
    color: #c8c9cc;
    font-size: 0.58667rem;
    cursor: pointer;
  }
}
.comments-popup {
  height: 18%;
}
</style>
